<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
        <title>Login</title>  
		 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
   		 <meta name="apple-mobile-web-app-capable" content="yes" />
        <!-- bower:css -->
        <link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="../../bower_components/components-font-awesome/css/fontawesome-all.css" />
        <link rel="stylesheet" href="../../bower_components/bootstrap-fileinput/css/fileinput.min.css" />
        <link rel="stylesheet" href="../../bower_components/glyphicons/styles/glyphicons.css" />
        <link rel="stylesheet" href="../../bower_components/bootstrap-offcanvas/dist/css/bootstrap.offcanvas.css" />
        <!-- endbower -->
		
		<!-- inject:css -->
		<link rel="stylesheet" href="../css/common.css">
		<!-- endinject -->
        <style type="text/css"> 
			.fa {
				display:inline-block;
				top:27px;
				left:6px;
				position:relative;
				color:#ccc;
			}
			.btn-pos{
				display:inline-block;
				top:27px;
				position:relative;
			}
			input[type="text"],input[type="password"] {
				padding-left:26px;
			}
			.span-col {
				color:#67666c;
			}
			.mt50{
				margin-top:50px;
			}
			
  
        </style>  
    </head>  
    <body>  
        <!-- bower:js -->
        <script src="../../bower_components/jQuery/dist/jquery.js"></script>
        <script src="../../bower_components/jquery/dist/jquery.js"></script>
        <script src="../../bower_components/bootstrap/dist/js/bootstrap.js"></script>
        <script src="../../bower_components/bootstrap-fileinput/js/fileinput.min.js"></script>
        <script src="../../bower_components/bootstrap-offcanvas/dist/js/bootstrap.offcanvas.js"></script>
        <!-- endbower -->
		
		<!-- inject:js -->
		<script src="../js/index.js"></script>
		<!-- endinject -->
    <div class="container">
		<div class="text-center mt-5" >
			<img src="../img/signup.png" class="center-block"/>
		</div>
        <div class="row">  
            <form class="col-sm-6  col-sm-offset-3" action="../php/login.php" method="POST">
                    <div class="form-group">  
                        <i class="fa fa-user fa-lg"></i>  
                        <input class="form-control" required type="text" placeholder="Username" name="username" autofocus="autofocus" maxlength="20"/>  
                    </div>  
                    <div class="form-group">  
                            <i class="fa fa-lock fa-lg"></i>  
                            <input class="form-control" required type="password" placeholder="Password" name="password" maxlength="8"/>  
                    </div>  
                    
                    <div class="form-group">  
                        <center><input type="submit" class="btn-pos btn btn-primary btn-lg btn-block btn-circle" value="Sign In "/></center>     
                    </div>
					
					<div class="form-group mt50">  
                        <center>
							<span class="span-col">Do not have an account?</span> <a href="./register.html">Sign Up</a>
						</center>     
                    </div>
            </form>  
        </div>  
  
       
    </div>    
    </body>  
</html>  
